<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Main Drawing Parameters ---

        // Rollers
        const rollerRadius = 25;
        const rollerY = 200;
        const a = 250; // Distance between roller centers
        const roller1X = 150;
        const roller2X = roller1X + a;

        // Rod
        const rodHeight = 30;
        const rodLength = 450;
        const rodY = rollerY - rollerRadius - rodHeight;
        const rodX = (canvas.width - rodLength) / 2;

        // Center of mass 'C'
        const x_dist = 100; // Distance from roller 1 to C
        const cX = roller1X + x_dist;
        const cY = rodY + rodHeight / 2;

        // --- Drawing Functions ---

        function drawRod() {
            ctx.strokeRect(rodX, rodY, rodLength, rodHeight);
        }

        function drawRollers() {
            // Roller 1
            ctx.beginPath();
            ctx.arc(roller1X, rollerY, rollerRadius, 0, 2 * Math.PI);
            ctx.stroke();
            // Center dot for Roller 1
            ctx.beginPath();
            ctx.arc(roller1X, rollerY, 3, 0, 2 * Math.PI);
            ctx.fill();
            // Label 1
            ctx.fillText('1', roller1X - rollerRadius - 20, rollerY);

            // Roller 2
            ctx.beginPath();
            ctx.arc(roller2X, rollerY, rollerRadius, 0, 2 * Math.PI);
            ctx.stroke();
            // Center dot for Roller 2
            ctx.beginPath();
            ctx.arc(roller2X, rollerY, 3, 0, 2 * Math.PI);
            ctx.fill();
            // Label 2
            ctx.fillText('2', roller2X + rollerRadius + 20, rollerY);
        }

        function drawRotationArrows() {
            const arrowRadius = rollerRadius * 0.7;

            // Arrow for Roller 1 (Counter-clockwise)
            ctx.beginPath();
            const startAngle1 = 0; // 3 o'clock
            const endAngle1 = 1.5 * Math.PI; // 12 o'clock
            ctx.arc(roller1X, rollerY, arrowRadius, startAngle1, endAngle1);
            ctx.stroke();
            // Arrowhead
            const arrow1X = roller1X;
            const arrow1Y = rollerY - arrowRadius;
            ctx.beginPath();
            ctx.moveTo(arrow1X, arrow1Y);
            ctx.lineTo(arrow1X - 6, arrow1Y - 5);
            ctx.moveTo(arrow1X, arrow1Y);
            ctx.lineTo(arrow1X - 6, arrow1Y + 5);
            ctx.stroke();

            // Arrow for Roller 2 (Clockwise)
            ctx.beginPath();
            const startAngle2 = Math.PI; // 9 o'clock
            const endAngle2 = -0.5 * Math.PI; // 12 o'clock
            ctx.arc(roller2X, rollerY, arrowRadius, startAngle2, endAngle2, true);
            ctx.stroke();
            // Arrowhead
            const arrow2X = roller2X;
            const arrow2Y = rollerY - arrowRadius;
            ctx.beginPath();
            ctx.moveTo(arrow2X, arrow2Y);
            ctx.lineTo(arrow2X + 6, arrow2Y - 5);
            ctx.moveTo(arrow2X, arrow2Y);
            ctx.lineTo(arrow2X + 6, arrow2Y + 5);
            ctx.stroke();
        }

        function drawCenterOfMass() {
            // Dot for C
            ctx.beginPath();
            ctx.arc(cX, cY, 4, 0, 2 * Math.PI);
            ctx.fill();
            // Label C
            ctx.fillText('C', cX + 15, cY);
        }

        function drawDimensionLines() {
            // Dimension 'x'
            const dimX_Y = rodY - 30;
            ctx.beginPath();
            // Horizontal line
            ctx.moveTo(roller1X, dimX_Y);
            ctx.lineTo(cX, dimX_Y);
            // Left tick
            ctx.moveTo(roller1X, dimX_Y - 5);
            ctx.lineTo(roller1X, dimX_Y + 5);
            // Right tick
            ctx.moveTo(cX, dimX_Y - 5);
            ctx.lineTo(cX, dimX_Y + 5);
            ctx.stroke();
            ctx.fillText('x', (roller1X + cX) / 2, dimX_Y - 15);

            // Dimension 'a'
            const dimA_Y = rollerY + rollerRadius + 40;
            ctx.beginPath();
            // Horizontal line
            ctx.moveTo(roller1X, dimA_Y);
            ctx.lineTo(roller2X, dimA_Y);
            // Left guide line with T-bar
            ctx.moveTo(roller1X, rollerY);
            ctx.lineTo(roller1X, dimA_Y);
            // Right guide line with T-bar
            ctx.moveTo(roller2X, rollerY);
            ctx.lineTo(roller2X, dimA_Y);
            ctx.stroke();
            ctx.fillText('a', (roller1X + roller2X) / 2, dimA_Y + 15);
        }

        function drawCaption() {
            ctx.font = '22px Times New Roman';
            ctx.fillText('Fig. 1.114.', canvas.width / 2, canvas.height - 30);
        }

        // --- Execute Drawing ---
        drawRod();
        drawRollers();
        drawRotationArrows();
        drawCenterOfMass();
        drawDimensionLines();
        drawCaption();

    </script>
</body>
</html>